<template>
    <div class="detail-box">
        <nut-swiper :init-page="page" :pagination-visible="true" pagination-color="#426543" auto-play="3000">
            <nut-swiper-item v-for="item in list" :key="item">
                <img :src="item" alt="" style="width: 100%;" />
            </nut-swiper-item>
            <template #page>
                <div class="swiper-pagination"> {{ val }}/4 </div>
            </template>
        </nut-swiper>
        <div class="content">
            <div class="title flex-a flex-b">
                <div class="left">
                    <nut-price :price="price" size="large" />
                    <!-- <nut-price :price="278" size="normal" :decimal-digits="0" strike-through /> -->
                </div>
                <div class="num">
                    <!-- 预约：200 -->
                </div>
            </div>
            <div class="name">{{ detail.project_Name }}</div>
            <div class="info">一次治理长效质保 畅享新升级</div>
        </div>
        <div class="content">
            <div class="rows flex-a">
                <div class="sort">服务类别</div>
                <div class="server flex-a flex-b" @click="selCategory">
                    <span>{{ serviceList[0].name || '请选择服务类别' }}</span>
                    <Right size="12" color="#999" />
                </div>
            </div>
        </div>
        <div class="content">
            <div class="rows flex-a">
                <div class="sort">套餐选择</div>
                <div class="server flex-a flex-b" @click="selThali">
                    <span>{{ mealActive >= 0 ? mealList[mealActive].project_Name : '请选择套餐' }}</span>
                    <Right size="12" color="#999" />
                </div>
            </div>
        </div>
        <div class="content">
            <div class="rows flex-a">
                <div class="sort">服务人员</div>
                <div class="server flex-a flex-b" @click="showPeople">
                    <span v-if="currentUser.user_Nickname" class="head-img flex-a">
                        <img :src="currentUser.imageUrl" alt="">
                        <span>{{
            currentUser.user_Nickname
        }}</span>
                    </span>
                    <span v-else>请选择服务人员</span>
                    <Right size="12" color="#999" />
                </div>
            </div>
        </div>
        <div class="content">
            <div class="evaluate flex-a">
                <div class="sort">服务评价</div>
                <div class="server flex-a flex-b">
                    <span>最近已有2305条评价</span>
                    <Right size="12" color="#999" />
                </div>
            </div>
            <div class="eval-list">
                <div class="eval-item">
                    <div class="head flex-a flex-b">
                        <div class="avatar flex-a">
                            <img src="https://storage.360buyimg.com/jdc-article/NutUItaro34.jpg" alt="">
                            <div class="nick">
                                <div>贝贝麻麻</div>
                                <div>
                                    <StarFillN color="#FE6F49" size="14" />
                                    <StarFillN color="#FE6F49" size="14" />
                                    <StarFillN color="#FE6F49" size="14" />
                                    <StarFillN color="#FE6F49" size="14" />
                                    <StarFillN color="#FE6F49" size="14" />
                                </div>
                            </div>
                        </div>
                        <div class="time">2021-03-26 08:00:09</div>
                    </div>
                    <div class="box">
                        <div class="text">一次治理长效质保 畅享新升级一次治理长效质保 畅享新升级一次治理长效质保 畅享新升级一次治理长效质保 畅享新升级</div>
                        <div class="imgs">
                            <img src="https://cxj.szzkba.cn/upload/i/2024/07/24/161448.png" alt="">
                            <img src="https://cxj.szzkba.cn/upload/i/2024/07/24/161448.png" alt="">
                            <img src="https://cxj.szzkba.cn/upload/i/2024/07/24/161448.png" alt="">
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <nut-button color="#21C38F" block @click="toOrder" class="sub-btn">立即预约</nut-button>
        <nut-popup v-model:visible="showBottom" position="bottom" closeable round :style="{ height: '80%' }">
            <div class="dialog-box">
                <div class="product flex-a">
                    <img :src="detail.remark" alt="">
                    <div class="select">
                        <div>{{ detail.project_Name }}</div>
                        <div>
                            <nut-price :price="price" size="large" />
                            <!-- <nut-price :price="278" size="normal" :decimal-digits="0" strike-through /> -->
                        </div>
                        <div>请选择类别、套餐</div>
                    </div>
                </div>
                <div class="service">
                    <div class="ser-title">服务类别</div>
                    <div class="ser-list">
                        <div :class="serviceActive == index ? 'ser-item active' : 'active ser-item'"
                            v-for="(item, index) in serviceList" @click="selService(item, index)">{{ item.name }}</div>
                    </div>
                </div>
                <div class="meal">
                    <div class="meal-title">套餐选择</div>
                    <div class="meal-list">
                        <div :class="mealActive == index ? 'meal-item active' : 'meal-item'"
                            v-for="(item, index) in mealList" @click="selMeal(item, index)">
                            {{ item.project_Name }}
                        </div>
                    </div>
                </div>
                <div class="add-num flex-a flex-b">
                    <div>购买数量</div>
                    <nut-input-number v-model="num" @change="changeNum" />
                </div>
                <nut-button color="#21C38F" block @click="submitOrder">提交订单</nut-button>
            </div>
        </nut-popup>
        <nut-popup v-model:visible="peopleBottom" position="bottom" closeable round :style="{ height: '80%' }">
            <div class="dialog-box">
                <div class="meal">
                    <div class="meal-title">服务人员</div>
                    <div v-for="(item, index) in peopleList"
                        style="width:92%; margin-left: 4%; margin-top: 3%; background: #ffff;border-radius: 5%; padding-bottom: 3%;box-shadow: 0 0 10rpx 0 #ccc">
                        <nut-row>
                            <nut-col :span="8">
                                <div class="avatar">
                                    <image class="avatarImage2"
                                        src="https://cxj.szzkba.cn/upload/i/2024/06/04/182133.jpeg">
                                    </image>
                                </div>
                            </nut-col>
                            <nut-col :span="16" style="">
                                <nut-row>
                                    <nut-col :span="18">
                                        <div
                                            style="display: flex; margin-right: 5%;align-items: center;margin-top: 10%;">
                                            <text style="font-size: 20px;font-weight: bold;margin-right: 5%;">{{
            item.user_Nickname
        }}</text>
                                            <div class="flex-a level">
                                                <img src="https://cxj.szzkba.cn/upload/i/2024/07/02/141748.png"
                                                    v-if="item.level == '1'" alt="">
                                                <img src="https://cxj.szzkba.cn/upload/i/2024/07/02/141748_1.png"
                                                    v-if="item.level == '2'" alt="">
                                                <img src="https://cxj.szzkba.cn/upload/i/2024/07/02/141748_2.png"
                                                    v-if="item.level == '3'" alt="">
                                                <img src="https://cxj.szzkba.cn/upload/i/2024/07/02/141748_3.png"
                                                    v-if="item.level == '4'" alt="">
                                                <img src="https://cxj.szzkba.cn/upload/i/2024/07/02/141749.png"
                                                    v-if="item.level == '5'" alt="">
                                                <img src="https://cxj.szzkba.cn/upload/i/2024/07/02/141749_1.png"
                                                    v-if="item.level == '6'" alt="">
                                                <span :class="'c' + item.level">{{ item.level == '1' ? '小白' : item.level
            == '2'
            ? '初级' : item.level == '3' ? '中级' : item.level == '4'
                ? '高级' : item.level == '5' ? '特级' : item.level == '6' ? '明星' : ''
                                                    }}</span>
                                            </div>
                                        </div>
                                    </nut-col>
                                </nut-row>
                                <nut-row>
                                    <div style="display: flex; margin-right: 5%;align-items: center;margin-top: 4%;">
                                        <nut-tag v-if="item.user_Enterts[0] != ''" color="#E9E9E9" text-color="#999999"
                                            style="margin-right: 5%;"> {{ item.user_Enterts[0] }} </nut-tag>
                                        <nut-tag v-if="item.user_Services[0] != ''" color="#E9E9E9" text-color="#999999"
                                            style="margin-right: 5%;"> {{ item.user_Services[0] }} </nut-tag>
                                        <nut-tag v-if="item.user_Leisures[0] != ''" color="#E9E9E9" text-color="#999999"
                                            style="margin-right: 5%;"> {{ item.user_Leisures[0] }} </nut-tag>
                                    </div>
                                </nut-row>
                                <nut-row>
                                    <div style="display: flex; margin:0 5% 0 0;align-items: center;">
                                        <div style="font-size: 14px;color:#999999;">获得0个好评</div>
                                        <div style="margin-left: auto;margin-top: -2%;"><nut-button
                                                style="white-space: nowrap;padding: 0 20rpx;font-size: 20rpx;"
                                                color="#21C38F" size="mini"
                                                @click="selPeople(item, index)">选择Ta</nut-button>
                                        </div>
                                    </div>
                                </nut-row>
                            </nut-col>
                        </nut-row>
                    </div>
                </div>
            </div>
        </nut-popup>
    </div>
</template>

<script lang="ts">
import Taro, { useRouter } from '@tarojs/taro';
import { Left, Right, StarFillN } from '@nutui/icons-vue-taro';
import { reactive, toRefs, onMounted, ref } from 'vue';
import { getServiceDetail, getUserDetailsList } from '../../../../api/index'
export default {
    components: {
        Left,
        Right,
        StarFillN
    },
    setup() {
        const data = reactive({
            list: [
                'https://storage.360buyimg.com/jdc-article/NutUItaro34.jpg',
                'https://storage.360buyimg.com/jdc-article/NutUItaro2.jpg',
                'https://storage.360buyimg.com/jdc-article/welcomenutui.jpg',
            ],
            detail: {},
            val: 1,
            showBottom: false,
            serviceList: [
                {
                    name: '钟点服务'
                },
                // {
                //     name: '按周服务'
                // },
                // {
                //     name: '按月服务'
                // }
            ],
            serviceActive: -1,
            mealList: [
                // {
                //     name: '（套餐一）一居室清洁'
                // },
                // {
                //     name: '（套餐二）二居室清洁'
                // },
                // {
                //     name: '（套餐三）三居室清洁'
                // },
                // {
                //     name: '（套餐四）四居室清洁'
                // },
                // {
                //     name: '（套餐五）一居室+家电清洁'
                // },
                // {
                //     name: '（套餐六）二居室+家电清洁'
                // },
                // {
                //     name: '（套餐七）三居室+家电清洁'
                // }
            ],
            mealActive: -1,
            num: 1,
            id: '',
            peopleList: [],
            peopleActive: -1,
            peopleBottom: false,
            currentUser: {},
            client_ID: '',
            price: '',
        });
        onMounted(() => {
            const router = useRouter();
            if (router.params.id) {
                data.id = router.params.id
                getDetail(router.params.id)
                getUserAllList()
            }
        })
        const jumpTo = (path) => {
            Taro.navigateTo({ url: path });
        }
        const onChange = (index) => {
            data.val = index + 1
        }
        const selService = (item, index) => {
            data.serviceActive = index
        }
        const selMeal = (item, index) => {
            data.mealActive = index
            data.client_ID = item.ID
            data.num = Number(item.mini_Count)
            if (data.currentUser.level) {
                data.price = Number(item.mini_Amount)*Number(item.mini_Count) * Number(data.currentUser.level)
            } else {
                data.price = Number(item.mini_Amount) * Number(item.mini_Count)
            }
        }
        const selPeople = (item, index) => {
            data.peopleActive = index
            data.currentUser = data.peopleList[index]
            data.price = Number(data.price) * Number(item.level)
            console.log("5555555555")
            console.log(data.currentUser)
            data.peopleBottom = false
        }
        const showPeople = () => {
            data.peopleBottom = true
        }
        const changeNum = (val) => {
            console.log(val)
            if (data.currentUser.level) {
                data.price = Number(item.mini_Amount) * Number(val) * Number(data.currentUser.level)
            } else {
                data.price = Number(item.mini_Amount) * Number(val)
            }
        }
        const selCategory = () => {
            data.showBottom = true
        }
        const selThali = () => {
            data.showBottom = true
        }
        const getDetail = (id) => {
            getServiceDetail({ ID: id }).then(res => {
                if (res.code == 0) {
                    data.detail = res.data.repageSetting
                    data.mealList = res.data.repageSetting.ProjectSecs
                    data.price = res.data.repageSetting.mini_Amount
                }
            })
        }
        const toOrder = () => {
            if (data.currentUser.ID) {
                jumpTo('/packageA/pages/subOrder/index?server_id=' + data.id + '&server_User_Id=' + data.currentUser.ID + '&client_ID=' + data.client_ID + '&mealIndex=' + data.mealActive + '&num=' + data.num)
            } else {
                Taro.showToast({
                    title: '请选择服务人员',
                    icon: 'error',
                    duration: 2000
                })
            }
        }
        const getUserAllList = () => {
            getUserDetailsList().then(res => {
                if (res.code == 0) {
                    for (var i in res.data.list) {
                        res.data.list[i].user_Enterts = res.data.list[i].user_Enterts.split(",")
                        res.data.list[i].user_Services = res.data.list[i].user_Services.split(",")
                        res.data.list[i].user_Leisures = res.data.list[i].user_Leisures.split(",")
                        res.data.list[i].user_Balls = res.data.list[i].user_Balls.split(",")
                    }
                    let list = res.data.list, arr = []
                    list.forEach(item => {
                        if (item.user_Status == '1') {
                            arr.push(item)
                        }
                    })
                    console.log("555555555555555555")
                    console.log(arr)
                    data.peopleList = arr
                }
            })
        }
        const submitOrder = () => {
            data.showBottom = false
        }
        return {
            ...toRefs(data), submitOrder, jumpTo, onChange, selService, selMeal, changeNum, getDetail, selCategory, selThali, toOrder, selPeople, showPeople, getUserAllList
        }
    }
};
</script>


<style lang="scss">
.detail-box {
    .swiper-pagination {
        position: absolute;
        bottom: 10rpx;
        right: 0;
        width: 80rpx;
        height: 40rpx;
        background: rgba(0, 0, 0, 0.33);
        border-radius: 20rpx;
        text-align: center;
        color: #fff;
        font-size: 30rpx;
    }

    .nut-button {
        width: 94%;
        margin: 20rpx auto 20rpx;
    }

    .dialog-box {
        padding: 30rpx 20rpx 0;

        .product {
            padding-bottom: 30rpx;
            border-bottom: 1rpx solid #F6F6F6;

            img {
                width: 160rpx;
                height: 160rpx;
                border-radius: 10rpx;
                margin-right: 20rpx;
            }

            .select {
                div:first-child {
                    color: #333;
                    font-size: 30rpx;
                }

                div:nth-child(2) {
                    margin: 10rpx 0;

                    .nut-price {
                        color: #F22F5C;
                        margin-right: 10rpx;
                    }

                    .nut-price--strike {
                        color: #999;
                    }
                }

                div:last-child {
                    color: #B3B3B3;
                    font-size: 26rpx;
                }
            }
        }

        .service {
            .ser-title {
                font-size: 32rpx;
                font-weight: bold;
                margin: 20rpx 0;
            }

            .ser-list {
                .ser-item {
                    display: inline-block;
                    width: 32%;
                    text-align: center;
                    box-sizing: border-box;
                    height: 70rpx;
                    line-height: 70rpx;
                    border: 1rpx solid #F5F5F5;
                    background: #F5F5F5;
                    margin-bottom: 20rpx;
                    border-radius: 5rpx;
                    font-size: 26rpx;
                    white-space: nowrap;
                }

                .ser-item:nth-child(3n+2) {
                    margin: 0 2% 20rpx;
                }

                .ser-item.active {
                    background: #F2FFFB;
                    border-color: #58D2AB;
                    color: #58D2AB;
                }
            }
        }

        .meal {
            .meal-title {
                font-size: 32rpx;
                font-weight: bold;
                margin: 20rpx 0;
            }

            .meal-list {
                .meal-item {
                    display: inline-block;
                    width: 49%;
                    text-align: center;
                    box-sizing: border-box;
                    height: 70rpx;
                    line-height: 70rpx;
                    border: 1rpx solid #F5F5F5;
                    background: #F5F5F5;
                    margin-bottom: 20rpx;
                    border-radius: 5rpx;
                    font-size: 26rpx;
                    white-space: nowrap;
                }

                .meal-item:nth-child(even) {
                    margin: 0 0 20rpx 2%;
                }

                .meal-item.active {
                    background: #F2FFFB;
                    border-color: #58D2AB;
                    color: #58D2AB;
                }
            }
        }

        .add-num {
            padding-top: 30rpx;
            border-top: 1rpx solid #F9F9F9;

            div {
                font-size: 28rpx;
                font-weight: bold;
            }
        }

        .sub-btn {
            width: calc(100% - 40rpx) !important;
            margin: 20rpx auto;
        }
    }

    .content {
        padding: 20rpx;
        background: #fff;
        margin-bottom: 10rpx;

        .title {
            .left {
                .nut-price {
                    // color: #21C38F;
                    margin-right: 20rpx;
                }

                .nut-price--strike {
                    color: #999;
                }
            }

            .num {
                color: #666;
            }
        }

        .name {
            margin-bottom: 50rpx;
            font-size: 28rpx;
        }

        .info {
            color: #666;
            font-size: 26rpx;
        }

        .rows {
            .sort {
                font-size: 28rpx;
                width: 30%;
            }

            .server {
                width: 70%;

                span {
                    color: #666;
                    font-size: 26rpx;
                }

                .head-img {
                    font-size: 24rpx;

                    img {
                        width: 50rpx;
                        height: 50rpx;
                        border-radius: 50%;
                        margin-right: 10rpx
                    }
                }
            }
        }

        .evaluate {
            .sort {
                font-size: 28rpx;
                width: 60%;
            }

            .server {
                width: 40%;

                span {
                    color: #666;
                    font-size: 26rpx;
                }

            }
        }

        .eval-list {
            .eval-item {
                margin-bottom: 20rpx;

                .head {
                    padding-top: 20rpx;

                    .avatar {
                        width: 60%;
                        font-size: 28rpx;

                        .nick {
                            div:first-child {
                                margin-bottom: 10rpx;
                            }
                        }

                        img {
                            width: 80rpx;
                            height: 80rpx;
                            border-radius: 50%;
                            margin-right: 20rpx;
                        }
                    }

                    .time {
                        width: 40%;
                        color: #666;
                        font-size: 28rpx;
                    }
                }

                .box {
                    .text {
                        color: #666;
                        font-size: 26rpx;
                        height: 120rpx;
                    }

                    .imgs {
                        img {
                            width: 32%;
                            height: 250rpx;
                        }

                        img:nth-child(2) {
                            margin: 0 2%;
                        }
                    }
                }
            }
        }
    }
}

.avatar {
    position: relative;
    width: 100%;
    height: 180px;
}

.avatarImage1 {
    .nut-badge {
        white-space: nowrap;
        position: absolute;
        left: 60rpx;
        top: 60rpx;
    }
}

.status {
    width: 100rpx;
    text-align: center;
    background: rgba($color: #000000, $alpha: 0.4);
    color: #4CE9C3;
    border-radius: 20px 0 20px 0;
    position: absolute;
    left: 20rpx;
    top: 35rpx;
    white-space: nowrap;
    font-size: 22rpx;
    z-index: 999;
}

.status span {
    display: inline-block;
    width: 10rpx;
    height: 10rpx;
    border-radius: 50%;
    background: #4CE9C3;
    margin-right: 10rpx;
}

.avatarImage2 {
    position: absolute;
    border-radius: 20px;
    top: 35px;
    left: 20px;
    z-index: 1;
    width: 150px;
    height: 150px;
}

.level {
    span {
        font-size: 20rpx;
        margin-left: 5rpx;
        text-align: center;
        clip-path: polygon(15% 0, 100% 0, 100% 100%, 0% 100%);
        padding-left: 10rpx !important;
        background: #6574AB;
        color: #EBF7FF;
        padding: 0 10rpx;
        border-radius: 4rpx;

    }

    .c1 {
        background: #6574AB;
    }

    .c2 {
        background: #007DC4;
    }

    .c3 {
        background: #7B1DD3;
    }

    .c4 {
        background: #EB5B00;
    }

    .c5 {
        background: #FD5131;
    }

    .c6 {
        background: #F61C36;
    }

    img {
        width: 45rpx;
        height: 45rpx;
    }

    .info {
        display: inline-block;
        width: 92%;
        border-radius: 10rpx;
        background: #F5F5F5;
        height: 60rpx;
        line-height: 60rpx;
        font-size: 26rpx;
        text-align: center;
    }


}
</style>